One

主题

One2025-04-28
2584
11.6m
Get...

Umami 统计 ​

Umami 统计 ​

image-20250427062436592

目录 ​

[toc]

简介 ​ ​

Umami 是一款开源的、注重隐私的网络分析工具，可作为 Google Analytics 的替代方案。它提供对网站流量、用户行为和性能的重要洞察，同时优先考虑数据隐私。

与许多传统分析平台不同，Umami 不会收集或存储个人数据，从而避免了使用 cookie 的需求，并且符合 GDPR 和 PECR 标准。

Umami 设计轻巧且易于设置，可以自托管，让用户完全控制自己的数据。

官网：Umami

使用文档：Overview – Docs - Umami

来给自己的Teek博客增加一个Umami 统计功能。😊

版权 ​

警告

本着开源共享、共同学习的精神：

本文是在 《Hyde Blog》博主的《Umami统计》文章 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有（感谢原作者分享的手把手文档💖💖💖）。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境 ​

2025.4.27(已解决)

警告

次配置适用于Teek@1.0.2-2025.4.10版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

源码：

docker镜像：

bash
docker save ghcr.io/umami-software/umami:postgresql-latest |gzip > umami-postgresql.tar.gz
docker save postgres:13-alpine |gzip > postgres-13-alpine.tar.gz


[root@wiki umami]# ll -ht
total 256M
-rw-r--r-- 1 root root  99M Apr 27 21:53 postgres-13-alpine.tar.gz
-rw-r--r-- 1 root root 157M Apr 27 21:52 umami-postgresql.tar.gz

image-20250427222157504

前提 ​

  • 云服务器已安装好docker，docker-compose
  • 有自己域名、自己云服务器
  • 具有Teek博客

🍊docker-compos 安装 ​

安装 方式

有几种不同的方法可以安装 Umami。

  • 从源代码安装：从 GitHub 获取代码并自行构建应用程序。
  • 使用 Docker compose：使用构建您自己的 Docker 容器 docker compose。
  • 使用 Docker 镜像：下载预先构建的 Docker 镜像。

1、启动容器 ​

（1）下载镜像

bash
cd /root
mkdir umami
cd umami
docker pull ghcr.io/umami-software/umami:postgresql-latest
docker pull postgres:13-alpine

（2）配置文件 ​

新建doker-compose.yaml文件并进行编辑

vim docker-compose.yaml

yaml
version: '3.8'

services:
  db:
    image: postgres:13-alpine
    container_name: umami_db
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - umami_db_data:/var/lib/postgresql/data
    restart: unless-stopped

  app:
    image: ghcr.io/umami-software/umami:postgresql-latest
    container_name: umami_app
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      HASH_SALT: replace-me-with-a-random-string
    ports:
      - "3000:3000"
    depends_on:
      - db
    restart: unless-stopped

volumes:
  umami_db_data:

image-20250427220438985

注意：

修改配置文件

  • DATABASE_URL：确保与 db 服务的配置一致。(这里你只需要修改成你自己的数据库密码就行)

  • HASH_SALT：替换为一个随机字符串，用于加密用户密码。可以使用以下命令生成：

    bash
    openssl rand -base64 32

（3）启动容器 ​

bash
docker-compose up -d

（4）验证 ​

bash
docker-compose ps -a

# 看到下面输出表示成功
[root@wiki umami]# docker ps 
CONTAINER ID        IMAGE                                            COMMAND                  CREATED             STATUS              PORTS                                                  NAMES
5645c2198127        ghcr.io/umami-software/umami:postgresql-latest   "docker-entrypoint.s…"   13 hours ago        Up 13 hours         0.0.0.0:3000->3000/tcp                                 umami_app
4ae95ec49f4c        postgres:13-alpine                               "docker-entrypoint.s…"   13 hours ago        Up 13 hours         5432/tcp                                               umami_db

（5）访问 Umami

  • 打开浏览器，访问 http://localhost:3000。 （这里用自己云服务器ip访问： http://云服务器公网ip:3000）
  • 默认管理员账号和密码：
    • 用户名：admin
    • 密码：umami

image-20250427070131898

2、配置反向代理 ​

如果需要通过域名访问 Umami，可以使用 Nginx 或 Traefik 配置反向代理。以下是我的Nginx 配置示例：

  • 配置nginx反向代理

vim /etc/nginx/conf.d/umami.onedayxyy.cn.conf

nginx
server {
    listen 80;
    server_name  umami.onedayxyy.cn;
    #配置https重定向
    return 301 https://$host$request_uri;
}

server {
    listen  443 ssl;
    server_name  umami.onedayxyy.cn;

    location / {
        proxy_pass http://106.75.214.199:3000/; 
        client_max_body_size 100M;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    } 

    ssl_certificate             /etc/letsencrypt/live/onedayxyy.cn/fullchain.pem;
    ssl_certificate_key         /etc/letsencrypt/live/onedayxyy.cn/privkey.pem;
    
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=31536000";
    
    access_log /var/log/nginx/umami.onedayxyy.cn.https.log;
}
  • 配置后重启nginx

nginx -s reload

警告

自己umami域名也需要配置下对应解析的哦，具体如何配置，这里不再做过多解释🤣。

3、配置项目 ​

  • 点击上面菜单的设置，添加网站，输入网站名称和网址保存

image-20250427070316323

  • 添加完成后，点击编辑 - 跟踪代码获取页面埋点链接

    image-20250427213751683

    image-20250427213825492

  • 将该链接添加到你网站的页面头部或者底部即可

ts
[
    "script",
    {
      src: "http://localhost:3000/script.js",
      "data-website-id": "7a2817d2-xxxx-xxxx-xxxx-8401f59642f1",
      defer: "defer",
    },
  ],

自己的配置：

ts
[
    "script",
    {
      src: "https://umami.onedayxyy.cn/script.js",
      "data-website-id": "c1f1daec-868c-4b7a-963b-93d99a0a959b",
      defer: "defer",
    },
],
  • 启用共享数据

image-20250427213933784

将复制好的代码写到docs\.vitepress\config.mts里的script部分。

image-20250427214116734

  • 推送teek项目
bash
gg2 #根据自己方式将teek项目推送。

注意：

这里记得修改下自己admin密码：

image-20250427221954301

4、验证 ​

  • 推送后，访问自己网站，观察效果 ​

image-20250427213702576

image-20250427213611794

结束。

总结 ​

通过 docker-compose 部署 Umami 非常简单，只需以下步骤：

  1. 创建 docker-compose.yml 文件。

  2. 修改配置文件（如 HASH_SALT）。

  3. 启动容器：

    bash
    docker-compose up -d

  4. 访问 http://localhost:3000 并使用默认账号登录。

如果需要进一步配置（如反向代理或 HTTPS），可以参考相关文档。如果有其他问题，请随时提问！

扩展 ​

停止和删除 Umami ​

  • 停止 Umami：

    bash
    docker-compose down

  • 删除 Umami 及其数据：

    bash
    docker-compose down -v

更新 Umami ​

  • 如果 Umami 发布了新版本，可以通过以下步骤更新：

    1. 拉取最新镜像：

      bash
      docker-compose pull

    2. 重启容器：

      bash
      docker-compose up -d

选项 ​ ​

排除我自己的访问。您想访问自己的网站，但又不想让访问记录出现在您的统计数据中。为此，您需要在浏览器中添加一项设置。

在浏览器中打开开发者控制台：Settings -> More tools -> Developer tools

在控制台中，输入以下代码并点击 Enter：

bash
localStorage.setItem('umami.disabled', 1);

此设置适用于每个网站，因此您需要对要排除的每个网站执行此操作。

要删除设置，请输入以下代码并点击 Enter：

bash
localStorage.removeItem('umami.disabled');

源代码安装 ​ ​

提示

这里为hyde的文档，仅做记录。

bash
git clone https://github.com/Umami-software/Umami.git
cd Umami
yarn install

🍊配置 Umami ​

  • 在 Umami 项目的根目录下创建一个名为 .env 的文件
md
.
│ ├──src
├── .env # 配置文件
├── package.json
├── README.md
├── yarn.lock

连接 url 格式如下：

提示

username mypassword 和 mydb 替换成实际的数据库用户名、密码和数据库名

bash
DATABASE_URL=postgresql://username:mypassword@localhost:5432/mydb

#自己的
DATABASE_URL=postgresql://umami:Um@ami_9hG&xy!@localhost:3300/umami

DATABASE_URL=mysql://username:mypassword@localhost:3306/mydb

我的配置如下：

bash
DATABASE_URL=mysql://root:root@localhost:3306/umami

🍊初始化数据库 ​

  • 新建 MySQL 链接

image-20250427061602015

  • 双击umami打开链接右键新建数据库

    • 数据库名称：输入 umami
    • 字符集：建议选择 utf8mb4（支持 Unicode 字符）
    • 排序规则：选择 utf8mb4_general_ci
    • 点击 “确定”，此时左侧列表中会出现 umami 数据库。

image-20250427061635030

🍊构建 ​

提示

首次运行构建时，它将在数据库中创建所有必需的数据库表。它还将创建一个用户名为 admin、密码为 umami 的登录帐户。

🍊启动 ​

image-20250427061710578

🍊重启 ​

您可以直接运行 yarn start 来启动 Umami，但强烈建议您使用像 PM2 这样的进程管理器来为您处理重启。

要使用 PM2 运行：

bash
yarn global add pm2
cd umami
pm2 start yarn --name umami -- start
pm2 startup
pm2 save

🍊配置 ​

  • 点击上面菜单的设置，添加网站，输入网站名称和网址保存

image-20250427061743963

  • 添加完成后，点击编辑 - 跟踪代码获取页面埋点链接

    image-20250427061801943

    image-20250427061811899

  • 将该链接添加到你网站的页面头部或者底部即可

ts
[
    "script",
    {
      src: "http://localhost:3000/script.js",
      "data-website-id": "7a2817d2-xxxx-xxxx-xxxx-8401f59642f1",
      defer: "defer",
    },
  ],

自己配置：

ts
[
    "script",
    {
      src: "http://服务器ip:3000/script.js",
      "data-website-id": "c1xxxxxb",
      defer: "defer",
    },
],

🍊效果 ​

image-20250427061834755

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

最近更新